<script lang="ts" setup>
import { ref } from 'vue'

const addressData = ref({
  user: '',
  telephone: '',
  region: [],
  detailed: ''
})

// 规则校验
const rules = {
  user: {
    rules: [
      { required: true, errorMessage: '请输入姓名' },
      { minLength: 2, maxLength: 10, errorMessage: '姓名长度在{minLength} 到 {maxLength} 个字符' }
    ]
  },
  telephone: {
    rules: [
      { required: true, errorMessage: '请输入手机号码' },
      {
        pattern: /^1[3-9]\d{9}$/,
        errorMessage: '手机号格式不正确'
      }
    ]
  },
  region: {
    rules: [
      { required: true, errorMessage: '请选择省/市/区' }
    ]
  },
  detailed: {
    rules: [
      { required: true, errorMessage: '请填写详细地址' }
    ]
  }
}

// 地区切换
const handleCityChange = (e: any) => {
  addressData.value.region = e.detail.value
}

// 获取表单引用
const baseForm = ref()

// 点击保存地址
const handSaveAddress = async () => {
  try {
    // 表单校验
    await baseForm.value.validate()

    // 获取到数据
    console.log(addressData.value)

    // 校验成功后返回上一页
    uni.navigateBack()
    // 显示保存成功提示
    uni.showToast({
      title: '保存成功',
      icon: 'success',
      duration: 1500
    })
  } catch (e) {
    console.log('表单校验失败')
  }
}
</script>

<template>
  <!-- 自动识别寄件人信息 -->
  <view class="identification">
    <view class="identification-p">粘贴地址信息,自动拆分寄件人信息</view>
    <uni-icons custom-prefix="iconfont" color="#999999" type="icon-tupian" size="24"></uni-icons>
  </view>

  <!-- 收货地址 -->
  <view class="address">
    <uni-forms ref="baseForm" label-width="150rpx" border :modelValue="addressData" :rules="rules">
      <uni-forms-item required label="姓名" name="user">
        <uni-easyinput class="uni-input" v-model="addressData.user" placeholder="收货人姓名" />
      </uni-forms-item>
      <uni-forms-item required label="电话" name="telephone">
        <uni-easyinput class="uni-input" v-model="addressData.telephone" placeholder="收货人手机号" />
      </uni-forms-item>
      <uni-forms-item required label="地区" name="region">
        <picker mode="region" @change="handleCityChange">
          <view class="picker-input">
            <uni-easyinput class="uni-input" disabled :placeholder="addressData.region.length > 0 ? '' : '请选择省/市/区'"
              :value="addressData.region.length > 0 ? addressData.region.join(' ') : ''" />
          </view>
        </picker>
      </uni-forms-item>
      <uni-forms-item required label="详细地址" name="detailed">
        <uni-easyinput class="uni-input" v-model="addressData.detailed" placeholder="详细地址" />
      </uni-forms-item>
    </uni-forms>
  </view>

  <!-- 保存数据 -->
  <button class="button" @click="handSaveAddress">保存</button>
</template>

<script lang="ts" setup>
</script>

<style scoped lang="scss">
.identification {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: $uni-padding;
  background-color: $uni-text-color-inverse ;
  border-radius: $uni-border-radius ;
  box-shadow: $uni-box-shadow;

  &-p {
    font-size: 30rpx;
    color: #858585;
  }
}

.address {
  background-color: $uni-text-color-inverse ;
  margin-top: 30rpx;
  padding: $uni-padding1;
  border-radius: $uni-border-radius;
}

.button {
  margin-top: 40rpx;
  background-color: #3a83ff;
  color: $uni-text-color-inverse ;
}

// 输入框 input 边框
:deep(.is-input-border) {
  border: none;
}

// 输入框 输入的值 字体大小
:deep(.uni-easyinput__content-input) {
  color: #333;
  /* 设置选中后的文字颜色 */
  font-size: 28RPX;
}

// 输入框 placeholder 大小
:deep(.uni-easyinput__placeholder-class) {
  font-size: 32rpx;
}

/* 修复 easyinput 在 picker 中的样式问题 */
:deep(.uni-easyinput__content) {
  padding-left: 0;
}
</style>